<template>
  <div class="wb-item-judge-right-wrong" v-if="getControlItem" :style="itemStyle">
    <div class="head-con">
      <img class="head" v-if="getControlItem.pic_url" v-lazy="getControlItem.pic_url">
      <img class="selected" v-if="isSelected" v-lazy="'https://static.hd.xxx.com/upload/biz/26/819395.png'">
    </div>
    <p v-if="getControlItem.name">{{getControlItem.name}}</p>
  </div>
</template>
<script>
import { utils } from '@/components/utils/utils'
import { commonUtils } from '@/components/utils/common-utils'
import { ref } from 'vue'
import { CONTROL_TYPES } from '@/common/const'

export default {
  mixins: [utils, commonUtils],
  setup () {
    return {
      isSelected: ref(false),
    }
  },
  methods: {
    onJudge(e, index){
      let controlData = this.getItemControls[CONTROL_TYPES.wb_judge_right_wrong]
      let right = controlData.data.right
      let lists = controlData.data.elements
      let eventAttr = this.item.eventAttr
      // let title = ''
      // let content = ''
      // let url = ''
      //正确答案
      let commonAttr
      let compId
      let controlItem = lists[index]
      let arr
      if(_.toString(right.value) == _.toString(controlItem[right.key])){
        //默认值是-1
        arr = eventAttr.successCompId.split("$")
        if(arr.length > 1){
          compId = arr[1]
        }
        // content = right.gift.name
        // url = right.gift.pic_url
      }else{
        arr = eventAttr.failCompId.split("$")
        if(arr.length > 1){
          compId = arr[1]
        }
        // content = controlItem.name
        // url = controlItem.pic_url
      }
      if(compId.length > 0){
        commonAttr = {isVisible: true}
      }else{
        commonAttr = {isVisible: false}
      }
      this.$store.commit('updateComponentVisible', {id: compId, commonAttr})
    },
    resetData(){
      this.isSelected = false
    }
  }
};
</script>
<style lang="scss">
.wb-item-judge-right-wrong{
  position: relative;
  display: block;
  h3, p{
    color: inherit;
    font-size: inherit;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-top: var(--size-12);
  }
  .head-con{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .head{
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .selected{
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
    width: 100%;
    height: 100%;
    font-size: 0;
  }
}
</style>

